import React from 'react';
import { Drawer, Form, Row, Col, Image, Button, Card, ImageViewer } from 'tdesign-react';
import classnames from 'classnames';
import CommonStyle from 'styles/common.module.less';
import IppeakImage from 'components/IppeakImage';

const { FormItem } = Form;

const labelWidth = 90;
const gutter: [number, number] = [16, 16];

export interface DetailDrawerProps {
  visible: boolean;
  onClose: () => void;
  data?: any;
  artClassMap?: any[];
}

const DetailDrawer: React.FC<DetailDrawerProps> = ({ visible, onClose, data, artClassMap = [] }) => {
  const detail = data || {};
  
  // 使用传递的artClassMap来显示分类标签
  const artClassZh = artClassMap.find(item => item.value === detail?.art_class)?.label || detail?.art_class || '-';
  const artClassEN = artClassMap.find(item => item.value === detail?.art_class_en)?.labelEn || detail?.art_class_en || '-';

  return (
    <Drawer
      visible={visible}
      onClose={onClose}
      header="友情链接详情"
      size="large"
      closeOnOverlayClick={false}
    footer={
      <>
        <Button theme="default" onClick={onClose}>
          关闭
        </Button>
      </>
    }
      placement="right"
      destroyOnClose
      className="sakura-drawer-wrapper"
      style={{ '--drawer-width': '45%' } as React.CSSProperties}
    >
      <div style={{ padding: 16 }}>
        <Form labelWidth={labelWidth} colon labelAlign="left">
          <Row gutter={gutter}>
            <Col span={12}>
              <FormItem label="名称" name="art_class" labelWidth={labelWidth}>
                <span>{data?.friend_name ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="跳转链接" name="art_class_en" labelWidth={labelWidth}>
                <span>{detail?.jump_link ?? '-'}</span>
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem label="排序" name="sort" labelWidth={labelWidth}>
                <span>{detail?.sort ?? '-'}</span>
              </FormItem>
            </Col>
             <Col span={12}>
               <FormItem label="状态" name="status" labelWidth={labelWidth}>
                 <span>{Number(detail?.deleted) === 0 ? '启用' : '禁用'}</span>
               </FormItem>
             </Col>
          </Row>
        </Form>

        <style>{`
          .detail-html img {
            width: 400px !important;
            height: 200px !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: cover;
            display: block; /* 独占一行 */
            margin: 8px 0; /* 与上下内容留白 */
          }
        `}</style>

      
      </div>
    </Drawer>
  );
};

export default DetailDrawer;
